<template>
    <div class="listContent" >
        <div class="topSearch">
            <div class="search">
                <input type="text" name="" id="" placeholder="输入机构名称搜索" v-model="worksName" @keyup.enter="selectWorks">
                <i class="el-icon-search" @click="selectWorks"></i>
            </div>
            <el-button  class="elBtn" type="primary" style="margin-left:20px;border-radius:20px;" @click="modifyWorks(0)"><i class="el-icon-plus"></i> 新增</el-button>
            <!-- <router-link to="/worksAdd">
            </router-link>  -->
            
            <el-upload
                class="upload-demo"
                action="string"
                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                :http-request="exportData"
                :show-file-list="false"
                :beforeUpload="beforeAvatarUpload"
                v-if="showUpload"
                style="display:inline-block;margin-left:10px;">
                <el-button slot="trigger" class="elBtn" type="primary" style="border-radius:20px;"><i class="el-icon-upload"></i> 批量导入</el-button>
            </el-upload>
        </div>
        <div class="list worksListDiv listPageStyle">
            <!-- <el-badge value="new" class="item">
            
            </el-badge> -->
            <div class="listCommon">
                <div class="worksList common-box" v-for="(item,index) in listData" :key="index" @mouseover="showEdit=(index+1)" @mouseout="showEdit=0" >
                    <div class="v-icon">
                        <span>{{item.name}}</span>
                    </div>
                    <span class="v-state">{{item.state|stateFormat}}</span>
                    
                    <div class="imgBox" title="预览图片" >
                        <viewer>
                            <img :src="item.picture" alt="图片加载失败">
                        </viewer>
                        <!-- <el-image 
                            :src="item.picture" 
                            alt="图片加载失败"
                            title="预览图片"
                            :preview-src-list="dialogImageUrlList">
                        </el-image> -->
                    </div>
                    <transition name="fade">
                        <div class="operateBar" v-show="showEdit==(index+1)">
                            
                            <el-button type="primary" size="mini" icon="el-icon-edit" circle title="修改" @click="modifyWorks(item.id)"></el-button> 
                            <el-button type="warning" size="mini" icon="el-icon-reading" circle title="查看审核结果" @click="checkResult(item.id)" v-if="item.state == 2 || item.state == 3"></el-button> 
                            <!-- <el-button type="warning" size="mini" icon="el-icon-reading" circle title="详情"></el-button> -->
                            <el-button type="danger" size="mini" icon="el-icon-delete" circle style="margin-right:20px;"  @click="deleteList(item.id)" title="删除"></el-button>
                        </div>
                    </transition>
                </div>
            </div>
            
        </div>
        <!-- 分页 -->
        <div class="pagenation">
            <el-pagination background 
            layout="prev, pager, next, sizes, total, jumper" 
            :page-sizes="pagesizes"
			:page-size="pagesize"
            :total="totalNum"
            @current-change="changePage"
            @size-change="sizeChange"
            > </el-pagination>
        </div>

        <!-- 审核结果框 -->
        <el-dialog title="审核结果" :visible.sync="dialogFormVisible" width="30%" center>
            <el-form ref="form" :model="form">
                <el-form-item label="结果" :label-width="formLabelWidth" prop="userName">
                    <el-input class="elInput" v-model="form.stateName" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="批注" :label-width="formLabelWidth" prop="email">
                    <el-input type="textarea" class="elInput" v-model="form.cause" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
                <el-button class="elBtn" type="primary" @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 删除框 -->
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确定删除这条信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button class="elBtn" type="primary" @click="doDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import commonFun from './commonFun.js'

export default {
    data(){
        return {
            dialogFormVisible:false,
            centerDialogVisible:false,
            formLabelWidth:"20%",
            showEdit:"",
            length:8,
            listData:[], // 数据数组
            currpage:1, // 当前页
            pagesizes:[5, 10, 15, 20],
            pagesize:10, // 每页显示条数
            totalNum:10, // 总数
            worksName:"", // 查询条件
            worksIds:[], // 批量删除的id数组
            form:{
                stateName:"",
                cause:""
            },
            showUpload:true
        }
    },
    created(){
        this.selectWorks()

        let userRole = this.$common.getUserInfo()?this.$common.getUserInfo().roleName:""
        if(userRole) this.showUpload = userRole.join(",").indexOf("管理员") == -1?false:true
        
    },
    mounted(){},
    methods:{
        // 批量导入
        exportData(param){
            let uploadData = new FormData();
            uploadData.append('file', param.file);
            this.$api.exportProgram(uploadData).then(result => {
                if(result.data.success){
                    this.$message({center: true,message: result.data.message?result.data.message:"导入成功",type: 'success'});
                    this.selectWorks()
                }
            });
        },
        beforeAvatarUpload(file){
            var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)				
            const extension = testmsg === 'xls'
            const extension2 = testmsg === 'xlsx'
            if(!extension && !extension2) {
                this.$message({
                    message: '只能上传xls、xlsx格式的文件!',
                    type: 'warning'
                });
            }
            return extension || extension2 
        },
        // 查询
        selectWorks(){
            const params = {
                name:this.worksName,
                page:this.currpage,
                limit:this.pagesize
            }
            var _this = this
            commonFun.selectMechanism(params,_this,result => {
                _this.listData = result.data.data.records
                _this.totalNum = result.data.data.total
            })
        },
        // 修改
        modifyWorks(index){
            // this.$router.push('/worksDetail/'+index)
            this.$router.push({
                path: '/worksDetail',
                name: `worksDetail`,
                params: {
                    id: index, type: 1
                }
            })
            
        },
        // 审核结果
        checkResult(id){
            this.dialogFormVisible = true
            this.$api.selectWorksById(id).then(result=>{id
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                         if(result.data.data.state == "1"){
                             result.data.data.stateName = "审核中"
                         }else if(result.data.data.state == "2"){
                             result.data.data.stateName = "审核通过"
                         }else if(result.data.data.state == "3"){
                             result.data.data.stateName = "审核未通过"
                         }else{
                             result.data.data.stateName = "未审核"
                         }
                        _this.form = result.data.data
                    }
                })
            })
        },
        // 删除提示
        deleteList(index){
            this.worksIds.push(index)
            this.centerDialogVisible = true
        },
        // 确认删除
        doDelete(){
            const params = {
                ids:this.worksIds
            }
            this.$api.deleteWorks(params)
            .then(result=>{
                var _this = this
                this.$common.filterLogin(result,_this,()=>{
                    if(result.data.success){
                        _this.selectWorks()
                        _this.centerDialogVisible = false
                    }
                })
                
            })
        },
        // 分页--改变当前页
        changePage(index){
            this.currpage = index
            this.selectWorks()
        },
        // 分页--改变当前页显示条数
        sizeChange(page){
            this.pagesize = page
            this.selectWorks()
        }
    },
    filters: {
        stateFormat: function (value) {
            if(value == "3"){
                return "未通过"
            }else if(value == "2"){
                return "通过"
            }else if(value == "1"){
                return "审核中"
            }else{
                return "未审核"
            }
        }
    },
   
}
</script>

<style lang="scss" scoped>
.listContent{
    height: 100%;
}
.topSearch{
    // display: flex;
    // align-items: center;
    // padding:20px 0;
    .search{
        margin-top:0;
    }
    .oprate{
        // margin-top: 34px;
        margin-left: 30px;
    }
}
.list{
    .worksList{
        .v-icon{
            top:-8%;
            left:-10%;
        }
        .v-state{
            position: absolute;
            top:2%;
            right:5%;
            font-size: 12px;
            color: #D18C91;
        }
    }
}
</style>

